<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于fetch的上传图片、文件到OSS</title>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        function reg() {
            let file =document.getElementById("file").files; //同名的file元素有多个
            //具体流程 第一步
            const formData=new FormData(); // 表示以表单形式构建参数
            // formData.append( "file", file);
            for(let i = 0; i < file.length; i++) {
                formData.append("file"+i, file[i]); // 将文件对象添加到 formData 中
            }
            // 第四步 向后端传数据  ， 提交数据到后端
            const postData = async (url, data) => {
                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        //参数 ： 因为有图片，文件，所以不能以json格式传数据
                        body: data
                    });
                    // 前后端关键地方  前后端分隔的地方  暂停  等后端处理完前端传的数据  接收来自后端的数据  返回出去
                    const result = await response.json(); //将响应体解析为 JSON 格式
                    return result; //此result是一个包含了jsonmodel的promise对象
                } catch (error) {
                    console.error('Error sending POST request:', error);
                }
            };
            //第二步   设置要调的Servlet 并传一个op判断调用的方法
            const apiUrl = 'FileToOSSText.action?op=regFile';
            //第三步   传递参数
            const pro = postData( apiUrl , formData ); //pro就是执行后的promise对象
            //第五步   接收后端数据  进行判断
            pro.then(jsonobj => {
                if (jsonobj.code == 1) {
                    $("resultdiv").innerHTML = "<b>文件上传成功</b> <br />链接地址:"+jsonobj.obj;
                    $('myImg').src=jsonobj.obj ;
                } else {
                    $("resultdiv").innerHTML = "<b>文件上传失败</b> 原因:" + jsonobj.error;
                }
            });
        }
    </script>
</head>
<body>
    选择需要上传的文件:<input type="file" name="file" id="file" multiple> <br />
    <input type="button"  id="btn" value="上传" onclick="reg()"/>
    <div id="resultdiv"></div>
    <h2>如果是图片则显示在下面:</h2>
    <img src="" id="myImg" width="100px"height="100px">
</body>
</html>